import { LeftOutlined, SendOutlined } from "@ant-design/icons";
import { Card, Space, Button, CardProps } from "antd";
import { FC, ReactNode } from "react";
import { useNavigate } from "react-router";

interface DetailWrapProps extends CardProps {
    onSubmit?: () => unknown;
    actionMore?: ReactNode;
    backUrl?: string;
}

const DetailWrap: FC<DetailWrapProps> = ({ onSubmit, actionMore, backUrl, ...props }) => {
    const navigate = useNavigate();
    return (
        <Card
            extra={
                <Space className="flex items-start absolute right-4 top-4">
                    <Button onClick={() => (backUrl ? navigate(backUrl, { replace: true }) : navigate(-1))} icon={<LeftOutlined />}>
                        返回
                    </Button>
                    {onSubmit && (
                        <Button type="primary" icon={<SendOutlined />} onClick={onSubmit}>
                            提交
                        </Button>
                    )}
                    {actionMore}
                </Space>
            }
            {...props}
        ></Card>
    );
};

export default DetailWrap;
